<!--
 * @Author: One_Random
 * @Date: 2020-08-26 12:36:07
 * @LastEditors: One_Random
 * @LastEditTime: 2020-09-11 14:43:51
 * @FilePath: /FS/html/shell.html
 * @Description: Copyright © 2020 One_Random. All rights reserved.
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>File Management System</title>    
        <link href="primer.css" rel="stylesheet" type="text/css" />   
        <link href="test.css" rel="stylesheet" type="text/css"/>
        <script>
             function XMLHTTP() {
                let xmlhttp;
                if (window.XMLHttpRequest)
                    xmlhttp=new XMLHttpRequest();
                else {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    windows.alert("Sorry!\nThis type of browser is not supported!");
                }

                return xmlhttp;
            }
            
            //上传文件
            function upload() {
                // 表单数据对象
                var formData = new FormData();
                // 多个文件需要进行逐个遍历
                for (var i = 0; i < document.getElementById("files").files.length; i++) {
                    // 将文件数据添加到表单数据中
                    formData.append("file", document.getElementById("files").files[i]);
                }
                let xmlhttp = XMLHTTP();
                xmlhttp.onreadystatechange = () => {
                    if (xmlhttp.readyState == 4) {
                        let s = document.getElementById('files');
                        s.outerHTML = s.outerHTML;
                        
                        if (xmlhttp.status == 200) {
                            if (xmlhttp.responseText == "log out") {
                                window.alert("Thanks for using!\nLog out successfully!");
                                location.reload();
                            }
                            else {
                                alert('上传成功!');
                                init();
                            }
                        }
                        else if (xmlhttp.status == 403) {
                            alert('上传失败!');
                        }
                        else if (xmlhttp.status == 401) {
                            window.alert("Authentication has expired!\nPlease login again!"); 
                            window.location = "/login";
                        }
                        else {
                            window.alert("Sorry!<br>It looks like something has gone wrong!");
                        }
                    
                    }
                }
                xmlhttp.open('POST', '/file/upload')
                xmlhttp.send(formData);
            }

            function closeDialog(id) {
                let dialog = document.getElementById(id);
                console.log(dialog);
                dialog.close();
                sessionStorage.removeItem('clickId');
            }

            function updateFileName() {
                let id = sessionStorage.getItem('clickId');
                id = Number(id);

                let files = JSON.parse(sessionStorage.getItem('files'));
                let name = files[id].name;
                let sort =files[id].sort;

                let new_name = document.getElementById('new_name').value;
                let dialog =document.getElementById('rename_dialog');

                console.log(new_name);
                

                if(new_name == null) {
                    alert('文件名不能为空！');
                    dialog.close();
                    return;
                }

                for(i = 0;i < files.length;i++) {

                    if(sort == 'file' && (new_name == files[i].name ||'/'+new_name == files[i].name)) {
                        alert('文件或文件夹名不能重复！');
                        dialog.close();
                        return;
                    }
                    if(sort == 'folder' && '/'+new_name == files[i].name) {
                        alert('文件或文件夹名不能重复！');
                        dialog.close();
                        return;
                    } 
                }
                if(sort == 'folder') {
                    new_name = '/'+new_name;
                    name =name.substr(1);
                }
                dialog.close();
                postXMLDoc('rename',name+','+new_name);
                
            }
            
            /*async function parsePermission(name,sort) {
                let xmlhttp = XMLHTTP();

                xmlhttp.onreadystatechange = () => {
                    if (xmlhttp.readyState == 4) {
                        
                        if (xmlhttp.status == 200) {
                            if (xmlhttp.responseText == "log out") {
                                window.alert("Thanks for using!\nLog out successfully!");
                                location.reload();
                            }
                            else {
                                let recv_obj = JSON.parse(xmlhttp.responseText);
                                let message = recv_obj.message;
                                console.log(message);
                                message =JSON.parse(message);
                                let owner = JSON.stringify(message.permissions.owner);
                                owner = owner.substr(1,owner.length-2);
                                let privilege = JSON.stringify(message.permissions.privilege);
                                privilege = privilege.substr(1,privilege.length-2);
                                let file_type = privilege[0];
                                let len = privilege[0].length;
                                let user_privilege = privilege.substr(1,3);
                                let other_privilege = privilege.substr(4,3);
                                
                                let privileges =[user_privilege,other_privilege];
                                return privileges;
                            } 
                        
                        }
                        //登录过期
                        else if (xmlhttp.status == 401) {
                            window.alert("Authentication has expired!\nPlease login again!"); 
                            window.location = "/login";
                        }
                        else {
                           window.alert("Sorry!<br>It looks like something has gone wrong!");
                        }
                    }
                }

                let param = '-l'
                if(sort == 'folder') {
                    name = name.substr(1);
                    param = '-folder'
                }

                let method = "POST";
                let url = "/shell/post";  
                let async = true;

                let args = [param,name];
                //参数以逗号隔开
                args =arg.split(',');

                let obj = {
                    "cmd": 'ls',
                    "args":args
                };

                xmlhttp.open(method, url, async);
                xmlhttp.send(JSON.stringify(obj));
            }*/
            async function updatePermission() {
                let id = sessionStorage.getItem('clickId');
                id = Number(id);

                let files = JSON.parse(sessionStorage.getItem('files'));
                let name = files[id].name;
                

                if(name[0] == '/') {
                    name = name.substr(1);
                }
                
                let dialog =document.getElementById('per_dialog');
                let form = document.getElementById("permission");
                let value = 0;
                for(i = 0;i < 3;i++ ){
                    if(form[i].checked == true) {
                        value += Number(form[i].value);
                    }
                }
                if(form[3].checked == true) {
                    user ='u';
                }
                else if(form[4].checked ==true) {
                    user = 'o';
                }
                else {
                    alert('请选择用户类型！');
                    dialog.close();
                }

                postXMLDoc('chmod',user+','+value+','+name);
                dialog.close();
            }

            //解析ls -l/ls -folder
            function parseMessage(message) {
                console.log(message);
                message =JSON.parse(message);
                let id =JSON.stringify(message.ID);
                let parent =JSON.stringify(message.parent);
                
                let created_time = JSON.stringify(message.created_time);
                created_time = Number(created_time);
                var unixTimestamp = new Date(created_time*1000);
                created_time = unixTimestamp.toLocaleString();

                let owner = JSON.stringify(message.permissions.owner);
                owner = owner.substr(1,owner.length-2);
                let privilege = JSON.stringify(message.permissions.privilege);
                privilege = privilege.substr(1,privilege.length-2);
                let file_type = privilege[0];
                let len = privilege[0].length;
                let user_privilege = privilege.substr(1,3);
                let other_privilege = privilege.substr(4,3);
                
                document.getElementById('owner').innerText = '拥有者：'+owner;
                document.getElementById('created_time').innerText ='创建时间：'+created_time;
                document.getElementById('user_privilege').innerHTML ='拥有者权限：'+user_privilege;
                document.getElementById('other_privilege').innerHTML = '其他用户权限：'+other_privilege;
                var dialog = document.getElementById('message_dialog');
                dialog.show();
                //alert('ID:'+id+'\n'+'Parent:'+parent+'\n'+'创建时间:'+created_time+'\n拥有者:'+owner+'\n拥有者权限:'+user_privilege+'\n其他用户权限:'+other_privilege);
            }

            //新建文件夹
            function createFolder() {
                let files = sessionStorage.getItem('files');
                files = JSON.parse(files);
                
               //保存文件夹名为新建文件夹+数字，而且文件夹名不重复
                suffixs = [];
                var file_name;

                if(files!=null) {

                    for(i = 0 ;i <files.length; i++) {

                        if(files[i].sort =='folder' && files[i].name.search("新建文件夹") == 1) {

                            name_suffix =files[i].name.substr(6);

                            if(/^\d+$/.test(name_suffix)) {
                                suffixs.push(Number(name_suffix));
                            }
                        }
                        else if(files[i].sort =='file' && files[i].name.search("新建文件夹") == 0) {
                            name_suffix =files[i].name.substr(5);

                            if(/^\d+$/.test(name_suffix)) {
                                suffixs.push(Number(name_suffix));
                            }
                        }
                    }

                    var suffix = 1;
                    for(suffix = 1;;suffix++){ 
                    var flag = true;
                    for(i = 0;i < suffixs.length;i++) {
                        if(suffix == suffixs[i]) {
                            flag =false;
                            break;
                        }
                    }
                    if(flag == true)
                        break;
                    }
                    file_name = '新建文件夹'+suffix;
                }
                else{
                    file_name = '新建文件夹1';
                }
                
                postXMLDoc('mkdir',file_name);
                dialog.close();
            } 

            function deleteFile() {
                let id = sessionStorage.getItem('clickId');
                let files = JSON.parse(sessionStorage.getItem('files'));
                id = Number(id);
                
                let file = files[id];
                console.log(file);
                let name = file.name;
                if(file.sort == 'folder') {
                    
                    postXMLDoc('rm','-r,'+name.substr(1)); 
                } 
                else {
                    postXMLDoc('rm',name);
                };
                var dialog = document.getElementById('delete_dialog');
                dialog.close();
            }

            //右键命令
            function menuFunction(command){
                let id = sessionStorage.getItem('clickId');
                

                if(command == 'cd') {
                    sessionStorage.removeItem('clickId');
                    if(document.getElementById(id).lastChild.className == 'folder') {
                        let name =document.getElementById(id).lastChild.lastChild.lastChild.innerText;
                        postXMLDoc(command,name);
                    }
                    else {
                        let name =document.getElementById(id).lastChild.lastChild.lastChild.innerText;
                        postXMLDoc('open',name);
                    }
                }
                else if(command == 'run') {
                    sessionStorage.removeItem('clickId');

                    if(document.getElementById(id).lastChild.className == 'folder') {
                        alert('只有文件才能执行。');
                        return;
                    }
                    else {
                        let name =document.getElementById(id).lastChild.lastChild.lastChild.innerText;
                        execFile('run',name);
                    }
                }
                
                else if(command == 'rm') {
                    /*sessionStorage.removeItem('clickId');
                    let files = JSON.parse(sessionStorage.getItem('files'));
                    id = Number(id);
                    
                    let file = files[id];
                    console.log(file);
                    let name = file.name;
                    if(file.sort == 'folder') {
                        
                        postXMLDoc('rm','-r,'+name.substr(1)); 
                    } 
                    else {
                        postXMLDoc('rm',name);
                    }*/

                    var dialog = document.getElementById("delete_dialog");
                    dialog.show();
                }
                else if(command == 'download') {
                    sessionStorage.removeItem('clickId');

                    if(document.getElementById(id).lastChild.className == 'folder') {
                        alert('只有文件才能下载。');
                        return;
                    }
                    else {
                        let name =document.getElementById(id).lastChild.lastChild.lastChild.innerText;
                        postXMLDoc('download',name);
                    }
                }
                else if(command == 'ls') {
                    sessionStorage.removeItem('clickId');
                    let files = sessionStorage.getItem('files');
                    files = JSON.parse(files);
                    id = Number(id);
                    let name = files[id].name;
                    
                    
                    if(name[0] == '/') {
                        postXMLDoc('ls','-folder,'+name.substr(1));
                    }
                    else {
                        console.log(name);
                        postXMLDoc('ls','-l,'+name);
                    }
                    
                }

                else if(command == 'chmod') {
                    //显示对话框
                    var dialog = document.getElementById("per_dialog");
                    dialog.show();
                }
                else if(command == 'rename') {
                    var dialog = document.getElementById("rename_dialog");
                    dialog.show();
                }
            }

            //生成右键菜单
            function generateRightMenu(elementClass,menuID) {

                var elements =document.getElementsByClassName(elementClass);
                var menu = document.getElementById(menuID);
                
                for(i = 0 ;i < elements.length;i++) {
                    elements[i].onmousedown=function(aevent) {
                        if(aevent.button==2) { //当事件属性button的值为2时，表用户按下了右键           
                            //存储点击的文件ID
                            sessionStorage.setItem('clickId',aevent.currentTarget.id);
                            console.log(aevent.currentTarget);
                            document.oncontextmenu=function(aevent) {
                                if (sessionStorage.getItem('clickId') != 'back') {
                                    aevent.preventDefault();          //对标准DOM 中断 默认点击右键事件处理函数
                                    menu.style.cssText='display:block;top:'+aevent.clientY+'px;'+'left:'+aevent.clientX+'px;'
                                }
                            };
                            
                        }
                    }
                }

                menu.onmouseleave=function() {                  //设置 鼠标移出菜单时 隐藏菜单
                    setTimeout(function(){menu.style.display="none";},400);
                    //sessionStorage.removeItem('clickId');
　　            }

            }

            //执行ls，生成图标
            function init() {             
                //清空session内容
                sessionStorage.clear();
                let xmlhttp = XMLHTTP();

                xmlhttp.onreadystatechange = () => {
                    if (xmlhttp.readyState == 4) {
                        
                        if (xmlhttp.status == 200) {
                            if (xmlhttp.responseText == "log out") {
                                window.alert("Thanks for using!\nLog out successfully!");
                                location.reload();
                            }
                            else {
                                let recv_obj = JSON.parse(xmlhttp.responseText);
                                console.log(recv_obj);
                                
                                //显示当前路径
                                dir = recv_obj.dir;
                                document.getElementById("router").innerText =dir;

                                //获取当前路径下所有文件和文件夹。信息存储在session
                                var files = [];
                                var files_name = [];

                                for(i = 0 ;i < recv_obj.message.length ;i++) {

                                    let file={};

                                    var sort = 'file';
                                    var id = i;
                                    if(recv_obj.message[i][0] == '/') {
                                        sort = 'folder';
                                    }
                                    else {
                                        sort = 'file';
                                    }

                                    file = {
                                        "id": id,
                                        "sort" : sort,
                                        "name" : recv_obj.message[i]
                                    }

                                    console.log(file);

                                    files.push(file);
                                    files_name.push(recv_obj.message[i]);
                                }
      
                                sessionStorage.setItem('files',JSON.stringify(files));

                                //生成文件和文件夹图标
                                generateIcon(files_name);

                                //生成右键菜单
                                generateRightMenu("items","right_menu");
                            } 
                        }
                        else if (xmlhttp.status == 201) {
                            let recv_obj = JSON.parse(xmlhttp.responseText);
                            console.log(recv_obj.message);
                            window.open(recv_obj.message);
                        }
                        else if (xmlhttp.status == 202) {
                            let recv_obj = JSON.parse(xmlhttp.responseText);
                            console.log(recv_obj.message);
                            window.open(recv_obj.message);
                        }
                        else if (xmlhttp.status == 401) {
                            window.alert("Authentication has expired!\nPlease login again!"); 
                            window.location = "/login";
                        }
                        else {
                           window.alert("Sorry!<br>It looks like something has gone wrong!");
                        }
                    }
                }

                let method = "POST";
                let url = "/shell/post";  
                let async = true;

                let obj = {
                    "cmd": "ls",
                    "args": ""
                };

                xmlhttp.open(method, url, async);
                xmlhttp.send(JSON.stringify(obj));
            }

            async function setContent() {
                sessionStorage.setItem('contents',message);
            }

                        //提交命令
            async function execFile(cmd,arg) {
                let xmlhttp = XMLHTTP();

                xmlhttp.onreadystatechange = () => {
                    if (xmlhttp.readyState == 4) {
                        
                        if (xmlhttp.status == 200) {
                            if (xmlhttp.responseText == "log out") {
                                window.alert("Thanks for using!\nLog out successfully!");
                                location.reload();
                            }
                            else {
                                let recv_obj = JSON.parse(xmlhttp.responseText);
                            }     
                        }  
                        else if (xmlhttp.status == 202) {
                            let recv_obj = JSON.parse(xmlhttp.responseText);
                            console.log(recv_obj);
                            let message =recv_obj.message.toString();
                            message = message.replace(/\\r/g, '\r');
                            message = message.replace(/\\n/g, '\n');
                            console.log(message);
                            sessionStorage.setItem('contents',message);
                            //await setContent(message);
                            setTimeout(function(){ window.open('./terminal'); }, 1000);
                            /*document.getElementById("result").innerHTML += document.getElementById("input").value + "<br>" 
                                                                            + recv_obj.message + "<br>"
                                                                            + recv_obj.username + "@sfs:" + recv_obj.dir + "# ";*/
                            //window.open(recv_obj.message);
                        }
                        //登录过期
                        else if (xmlhttp.status == 401) {
                            window.alert("Authentication has expired!\nPlease login again!"); 
                            window.location = "/login";
                        }
                        //权限不足
                        else if(xmlhttp.status == 403) {
                            window.alert("No Permission!");
                        }
                        else {
                           window.alert("Sorry!<br>It looks like something has gone wrong!");
                        }
                    }
                }

                let method = "POST";
                let url = "/shell/post";  
                let async = false;

                let args = [];
                //参数以逗号隔开
                args =arg.split(',');

                let obj = {
                    "cmd": cmd,
                    "args":args
                };

                xmlhttp.open(method, url, async);
                xmlhttp.send(JSON.stringify(obj));
            }

            //提交命令
            function postXMLDoc(cmd,arg) {
                let xmlhttp = XMLHTTP();

                xmlhttp.onreadystatechange = () => {
                    if (xmlhttp.readyState == 4) {
                        
                        if (xmlhttp.status == 200) {
                            if (xmlhttp.responseText == "log out") {
                                window.alert("Thanks for using!\nLog out successfully!");
                                location.reload();
                            }
                            else {
                                let recv_obj = JSON.parse(xmlhttp.responseText);
                                
                                //如果是cd命令
                                if(cmd == 'cd'){
                                    document.getElementById('right_menu').style.cssText='display:none';
                                    init();
                                }

                                else if(cmd == 'mkdir') {
                                    init();
                                    alert('新建成功');
                                }

                                else if(cmd == 'rm') {
                                    document.getElementById('right_menu').style.cssText='display:none';
                                    init();
                                    alert('删除成功')
                                }

                                //详细信息
                                else if(cmd == 'ls') {
                                    console.log(recv_obj);
                                    let message = recv_obj.message;
                                    parseMessage(message);
                                    //alert(message.toString());
                                    
                                    
                                }
                                else if(cmd == 'chmod') {
                                    alert('操作成功！');
                                    init();
                                }
                                else if(cmd == 'rename'){
                                    alert('操作成功！');
                                    init();
                                }

                            } 
                        }
                        else if (xmlhttp.status == 201) {
                            let recv_obj = JSON.parse(xmlhttp.responseText);
                            console.log(recv_obj);
                            window.open(recv_obj.message);
                        }
                        else if (xmlhttp.status == 202) {
                            let recv_obj = JSON.parse(xmlhttp.responseText);
                            console.log(recv_obj);
                            let message =recv_obj.message.toString();
                            message = message.replace(/\\r/g, '\r');
                            message = message.replace(/\\n/g, '\n');
                            console.log(message);
                            sessionStorage.setItem('contents',message);
                            //await setContent(message);
                            setTimeout(function(){ window.open('./terminal'); }, 500);
                            /*document.getElementById("result").innerHTML += document.getElementById("input").value + "<br>" 
                                                                            + recv_obj.message + "<br>"
                                                                            + recv_obj.username + "@sfs:" + recv_obj.dir + "# ";*/
                            //window.open(recv_obj.message);
                        }
                        //登录过期
                        else if (xmlhttp.status == 401) {
                            window.alert("Authentication has expired!\nPlease login again!"); 
                            window.location = "/login";
                        }
                        //权限不足
                        else if(xmlhttp.status == 403) {
                            window.alert("No Permission!");
                        }
                        else {
                           window.alert("Sorry!<br>It looks like something has gone wrong!");
                        }
                    }
                }


                let method = "POST";
                let url = "/shell/post";  
                let async = true;

                let args = [];
                //参数以逗号隔开
                args =arg.split(',');

                let obj = {
                    "cmd": cmd,
                    "args":args
                };

                xmlhttp.open(method, url, async);
                xmlhttp.send(JSON.stringify(obj));
            }

            
            //生成当前目录的图标
            function generateIcon(files){

                //清空面板
                document.getElementById("file_panel").innerHTML = "";

                //生成图标
                for(i = 0 ;i < files.length;i++){

                    var item = document.createElement('div');
                    item.id = String(i);                   
                    item.className = "items";

                    //文件或文件夹名
                    var item_name = files[i];

                    var content = document.createElement('div');
                    var img = document.createElement('img');
                    var br = document.createElement('br');
                    var span = document.createElement('span');
                    
                    if(item_name[0] == '/' ) {
                        //去掉'/'
                        item_name = item_name.substr(1);
                        content.className = "folder";
                        content.innerHTML = '<a><herf= "#" style="color:#666666;text-decoration:none;"'+'onclick=postXMLDoc("cd","'+item_name+'")><img class="folder_img" src="./folder.png">'+item_name+'</a>';

                    }
                    else {

                        content.className = "file";
                        content.innerHTML =  '<a><herf= "#" style="color:#666666;text-decoration:none;"><img class="file_img" src="./file.jpg">'+item_name+'</a>';
                    }

                    item.appendChild(content);

                    document.getElementById("file_panel").appendChild(item);
                }
            }

            function jump(){           
                window.open('./manager');
            }
            
        </script>
    </head>

    <body onload=init()>
        <!--头部-->
        <header id="navbar">
            <div id="title">WEB文件系统</div>
        </header>
        <!--按钮-->
        <div id ="button_panel">
            <div style="width: 40%;margin-left: 10px;padding-left: 20px; font-size: 19px;" id="router"></div>
            <!-- <div style="padding-right: 50px; margin-bottom: 12px;"> -->
            <input id="files" type="file" name="file" style="margin-bottom: 12px;"/> 
            <button type="button" class="btn mr-2" name="button" onclick="upload()" style="margin-bottom: 12px;">上传</button>
            <p id="result"></p>
            <!-- </div> -->
            <div style="margin-left: 50px;margin-bottom: 12px;">
                <button class="btn mr-2" type="button" onclick="createFolder()">新建文件夹</button>
            </div>
            <div style="margin-left: 50px; margin-bottom: 12px;">
                <button class="btn mr-2" type="button" onclick="postXMLDoc('cd','..')">返回上一级</button>
            </div>

            <div style="margin-left: 50px;margin-bottom: 12px;">
                <button class="btn mr-2" style="float:right" type="button" onclick="jump()">管理</button>
            </div>

            <div style="margin-left: 50px;margin-bottom: 12px;">
                <button class="btn mr-2" style="float:right" type="button" onclick="postXMLDoc('exit','')">退出</button>
            </div>
        </div>

        <!--分割线-->
        <div class="border-bottom"></div>

        <!--main-->
        <div id="main">
            <!-- <div id="back" class="items" style="height:100%; width:100%;z-index: 2;"></div> -->
            <div id="file_panel""></div>
        </div>
        
        <!--右键菜单-->       
            <div id="right_menu" class="Box" style="position:absolute;display:none;width:150px; height:auto;">
                <ul>
                <li class="Box-row" onclick="menuFunction('cd')" style="cursor:pointer">
                    打开
                  </li>
                  <li class="Box-row" onclick="menuFunction('run')" style="cursor:pointer">
                    执行
                    </li>
                  <li class="Box-row" onclick="menuFunction('rename')" style="cursor:pointer">
                    修改名字
                  </li>
                  <li class="Box-row" onclick="menuFunction('chmod')" style="cursor:pointer">
                    修改权限
                  </li>
                  <li class="Box-row" onclick="menuFunction('ls')" style="cursor:pointer">
                    详细信息
                  </li>
                  <li class="Box-row" onclick="menuFunction('download')" style="cursor:pointer">
                    下载
                  </li>
                  <li class="Box-row" onclick="menuFunction('rm')" style="cursor:pointer">
                    删除
                  </li>
                  
                </ul>
            </div>

        <!--权限选择菜单-->
        <dialog id="per_dialog"class="Box box-shadow">
            <span></span>
            <form id='permission' style = "margin-left:10px;" >
                可读
                <input type="checkbox" name="check" value=4 checked="checked" />
                <br />
                可写 
                <input type="checkbox" name="check" value=2 checked="checked"/>
                <br />
                可执行 
                <input type="checkbox" name="check" value=1 checked="checked"/>
                <br><br>
                <label style = "margin-left:10px;"><input name="user" type="radio" value="u" />自己 </label> 
                <label ><input name="user" type="radio" value="o" />其他用户</label> 
                <br /><br />

                <button class="btn mr-2" type="button" style = "margin-left:5%;"onclick="updatePermission()" >确认</button>
                <button class="btn mr-2" type="button"  onclick="closeDialog('per_dialog')">取消</button>
            </form>
        </dialog>

        <!--重命名文件弹窗-->
        <dialog id="rename_dialog" class="Box box-shadow">
            <form id='rename'>
                <input type="text" id='new_name'>

                <button class="btn mr-2"  type="button" onclick="updateFileName()" type="button">确定</button>
                <button class="btn mr-2"  type="button" onclick="closeDialog('rename_dialog')" type="button">取消</button>
            </form>
        </dialog>

        <!--详细信息-->
        <dialog id="message_dialog"class="Box box-shadow">
            <div class="Box-row">
                <h4 class="m-0">详细信息</h4>
              </div>
            <div class="Box-row">
                <span id="owner"></span>
                <br><br>
                <span id="created_time"></span>
                <br><br>
                <span id="user_privilege"></span>
                <br><br>
                <span id="other_privilege"></span>
                <br><br>
            </div>
            <div class="Box-row">
                <button class="btn mr-2" style="margin-left: 28%;" type="button" onclick="closeDialog('message_dialog')" type="button">确定</button>
            </div>
        </dialog>

        <!--删除确认-->
        <dialog id="delete_dialog" class="Box box-shadow">
            <div class="Box-row">
                <h4 class="m-0">确认删除?</h4>
            </div>
                <button class="btn mr-2"  type="button" onclick="deleteFile()" type="button">确定</button>
                <button class="btn mr-2"  type="button" onclick="closeDialog('delete_dialog')" type="button">取消</button>
        </dialog>
    </body>
</html>
            
        